<template>
	<div>
		<el-row :span="24" style="margin:26px 0;">
			<el-button @click="goBack()" type="primary">返回</el-button>
		</el-row>
		<div style="margin-top: 20px; border: 1px solid #999;height: 80%;display: flex;justify-content: flex-start;">
			<div style="width: 320px;">
				<div style="width: 100%;overflow: hidden;margin-left: 100px;background-color: #f4f5f6;">
					<div class="header_title">
						<img style="width: 100%;" src="../../assets/images/22.png" alt="">
						<p class="page_title">{{titleText}}</p>
					</div>
					<div :class="[marginStyle=='1'?'marginOneStyle':'marginTwoStyle']">

						<div :class="[productStyle=='1'?'productList':'productThreeList']">
							<div v-for="(item, index) in productList" :key="index" :class="[productStyle=='1'?'productItem':'productThreeItem'] ">
								<img :class="[productStyle=='1'?'productImg':'productThreeImg']" :src="item.goodCover" alt="">
								<div :class="[productStyle=='1'?'productInfo':'productThreeInfo']">
									<p :class="[productStyle=='1'?'productName':'productThreeName']">{{item.goodName}}</p>
									<p :class="[productStyle=='1'?'productPrice':'productThreePrice']">￥{{item.goodPrice}}</p>
								</div>
							</div>
						</div>
					</div>
					<div v-if="advertisingImgList.length > 0" style="width: 100%">
						<img style="width: 100%;display: flex;" v-for="(item, index) in advertisingImgList" :src="item" alt="" :key="index">
					</div>
          <div :class="[screenShow=='1'?'confirmScreen':'cancelScreen']">
            <div v-html="textContent"></div>
          </div>
				</div>
			</div>
			<div style="margin-top: 20px;margin-left: 170px;">
				<el-form style="width: 500px;background-color: #f4f5f6;padding: 15px;" :model="productListInfo" label-width="80px"
				 class="demo-form-inline">
          <el-form-item label="页面标题">
            <el-input style="width: 200px;" v-model="titleText"></el-input>
          </el-form-item>
          <div style="text-align: center;background-color: #f4f5f6;">商品样式</div>
          <el-form-item label="是否添加">
            <el-radio v-model="addProduct" label="1">是</el-radio>
            <el-radio v-model="addProduct" label="2">否</el-radio>
          </el-form-item>
					<el-form-item v-if="addProduct == '1'" label="样式">
						<el-radio v-model="productStyle" label="1">一行两个</el-radio>
						<el-radio v-model="productStyle" label="2">一行三个</el-radio>
					</el-form-item>
					<el-form-item v-if="addProduct == '1'" label="商品">
						<div class="upload_product">
							<img v-for="(item, index) in checkedImgList" :src="item.goodCover" :key="index" style="width: 80px;height: 80px;object-fit: cover;margin-right: 15px;margin-top: 15px;"
							 alt="">
							<img style="width: 80px;margin-top: 15px;" @click="fetchGoods(1);dialogTableVisible=true" :src="uploadImg" alt="">
						</div>
					</el-form-item>
					<el-form-item v-if="addProduct == '1'" label="页面边距">
						<el-radio v-model="marginStyle" label="1">10px</el-radio>
						<el-radio v-model="marginStyle" label="2">20px</el-radio>
					</el-form-item>
					<div style="text-align: center;">图文广告</div>
          <el-form-item label="是否添加">
            <el-radio v-model="addAdvertising" label="1">是</el-radio>
            <el-radio v-model="addAdvertising" label="2">否</el-radio>
          </el-form-item>
					<el-form-item v-if="addAdvertising == '1'" label="选择模板">
						<el-radio v-model="advertising" label="1">一行一个</el-radio>
					</el-form-item>
					<el-form-item v-if="addAdvertising == '1'" label="添加图片">
						<div class="upload_product">
						<we-ui-uploads :images="advertisingImgList" :maxCount="7" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
						</div>
					</el-form-item>
          <div  style="text-align: center;background-color: #f4f5f6;">富文本

          </div>
          <el-form-item label="是否添加">
            <el-radio v-model="addEditor" label="1">是</el-radio>
            <el-radio v-model="addEditor" label="2">否</el-radio>
          </el-form-item>
          <el-form-item v-if="addEditor == '1'" label="全屏显示">
            <el-radio  v-model="screenShow" label="1">是</el-radio>
            <el-radio v-model="screenShow" label="2">否</el-radio>
          </el-form-item>
          <div v-if="addEditor == '1'"  style="text-align: center;background-color: #f4f5f6;">
            <vue-editor class="newEditor" ref="myTextEditor"
                        :content="textContent" @onEditorChange="onEditorChange($event)"></vue-editor>
          </div>
					<el-form-item>
						<el-button type="primary" :loading="submitLoading" @click="submitProduct()">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<el-dialog title="选择商品" v-model="dialogTableVisible" size="large">
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" class="demo-form-inline" label-width="80px">
						<el-form-item label="商品名称">
							<el-col :span="18">
								<el-input v-model="formInline.goodName"></el-input>
							</el-col>
						</el-form-item>
						<el-button type="primary" @click="fetchGoods(1)">查询</el-button>
					</el-form>
				</el-col>
			</el-row>
			<el-table :data="gridData">
				<el-table-column width="215" label="商品">
					<template scope="scope">
						<div style="display: inline-block;">
							<img class="banner" :src="scope.row.goodCover" style="width:55px;">
						</div>
						<div style="display: inline-block;width: 120px;vertical-align: middle;padding: 10px;">{{scope.row.goodName}}</div>
					</template>
				</el-table-column>
				<el-table-column prop="DIS_PRICE" label="分类">
					<template scope="scope">
						<span>{{ scope.row.goodOneCateName }} - {{ scope.row.goodTwoCateName }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="good_Price" sortable='custom' label="起售价（元）">
					<template scope="scope">
						<span>{{ scope.row.goodPrice }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="T1.good_Discount_Price" label="优惠价（元）">
					<template scope="scope">
						<span v-if="scope.row.goodIsDiscount==1">{{ scope.row.goodDiscountPrice }}</span>
						<span v-else>未启用</span>
					</template>
				</el-table-column>
				<el-table-column prop="good_Ratio" label="补贴比例">
					<template scope="scope">
						<span>{{ scope.row.goodRatio*100 }}%</span>
					</template>
				</el-table-column>
				<el-table-column prop="sales" label="销量">
				</el-table-column>
				<el-table-column prop="stock" label="库存">
				</el-table-column>
				<el-table-column prop="cre_Time" label="上架时间">
					<template scope="scope">
						<span>{{scope.row.creTime}}</span>
					</template>
				</el-table-column>
				<el-table-column label="选择" width="150">
					<template scope="scope">
						<el-checkbox-group v-model="checked" :max="100" @change="handleCheckedCitiesChange">
							<el-checkbox :label="scope.row">选择</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginate" style="float: left;">
				<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
				 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
				</el-pagination>
			</div>
			<div style="float: right;margin-top:19px;margin-right: 20px;">
				<el-checkbox v-model="checkAll" @change="handleCheckAllChange" style="margin-right: 40px;" :indeterminate="isIndeterminate">全选</el-checkbox>
				<el-button type="primary" @click="onSubmit()">确定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				titleImg: '../../assets/images/22.png',
				titleText: '',
				productListInfo: {
					productImg: []
				},
				onceChecked: false,
				loading: false,
				submitLoading: false,
				checkedImgList: [],
				uploadImg: '../../../static/images/upload1.png',
				productList: [{
						goodName: '测试商品',
						id: '1',
						goodPrice: '11',
						goodCover: '../../../static/images/loadingError.png'
					},
					{

						goodName: '测试商品',
						id: '2',
						goodPrice: '12',
						goodCover: '../../../static/images/loadingError.png'
					},
				],
        addProduct: '2',
				productStyle: '1',
				dialogTableVisible: false,
				dialogTableVisible2: false,
				gridData: [],
				checked: [],
				checkAll: false,
				isIndeterminate: true,
				arr: [],
				formInline: {
					goodName: '',
					goodOneCate: '',
					goodTwoCate: '',
					goodState: 2,
					storeId: '',
					pageNum: 1,
					pageSize: 5,
					sort: 'T1.CRE_TIME',
					desc: 'DESC',
					goodIsDiscount: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 1,
					count: 1,
					rows: []
				},
				storeGoodDtos: [],
				name: '789',
				custormStyle: {
					productStyle: '1',
					productList: []
				},
				marginStyle: '1',
				// 广告
        addAdvertising: '2',
				advertising: '1',
				advertisingImgList:[],
      //  富文本
        addEditor: '2',
        textContent: '',
        screenShow: '2'
			}
		},
		created() {

		},
		activated() {
			this.productList = [{
					goodName: '测试商品',
					id: '1',
					goodPrice: '11',
					goodCover: '../../../static/images/loadingError.png'
				},
				{

					goodName: '测试商品',
					id: '2',
					goodPrice: '12',
					goodCover: '../../../static/images/loadingError.png'
				}
			]
			this.productStyle = '1'
			this.checkedImgList = []
			this.advertisingImgList = []
      this.addProduct = '2'
      this.addAdvertising = '2'
      this.addEditor = '2'
      this.textContent = ''
      this.screenShow = '2'
			//this.fetchList()
		},
		// watch:{
		//     'formInline.name'(val,oldVal) {
		//         //console.log(val)
		//         this.formInline[this.formInline.type] = this.formInline.name
		//     }
		// },
		methods: {
			uploading4(f) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 商品图片上传
				 * @return
				 * @createTime: 2020-8-11 17:25:32
				 */
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			fetchGoods(page = 1) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 获取选择商品
				 * @return
				 * @createTime: 2020-8-11 17:36:18
				 */
				this.checked = []
				this.pageInfo.pageNum = page;
				this.formInline.pageNum = page;
				this.dataApi.ajax('selectPageStoreGood', this.formInline, res => {
					if (res.responseType === 'S') {
						this.pageInfo = res
						this.gridData = res.dtos
						this.arr = []
						this.checked = []
						this.inisIndeterminate = true
						for (var i = this.gridData.length - 1; i >= 0; i--) {
							this.arr.push(this.gridData[i])
						}
						if (this.checked.length == this.arr.length) {
							this.checkAll = true
						} else {
							this.checkAll = false;
						}

					}
				});

			},
      onEditorChange(e) {
        /** 2020/8/20
         *作者:liuchen
         *功能:富文本
         */
        this.textContent = e.html
      },
			handleCheckedCitiesChange(value) {
				let arr = []
				for (var i = this.arr.length - 1; i >= 0; i--) {
					for (var j = this.checked.length - 1; j >= 0; j--) {
						if (arr.indexOf(this.checked[j]) === -1 && this.arr[i] === this.checked[j]) {
							arr.push(this.checked[j])
						}
					}
				}

				let checkedCount = arr.length;
				this.checkAll = checkedCount === this.arr.length;
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.arr.length;
			},
			handleCurrentChange(val) {
				this.fetchGoods(val)
				this.checkAll = false
			},
			handleCheckAllChange(event) {

				if (event.target.checked == false) {
					for (var i = this.arr.length - 1; i >= 0; i--) {
						for (var j = this.checked.length - 1; j >= 0; j--) {
							if (this.arr.indexOf(this.checked[j]) !== -1) {
								this.checked.splice(j, 1)
							}
						}
					}

				} else {
					this.isIndeterminate = false;
					for (var i = this.gridData.length - 1; i >= 0; i--) {
						if (this.checked.indexOf(this.arr[i]) === -1) {
							this.checked.push(this.arr[i])
						}
					}
				}
			},
			onSubmit() {
				this.dialogTableVisible = false
				this.onceChecked = true
				// this.pageInfo2.rows=this.checked
				if (this.storeGoodDtos.length > 0) {
					for (var key in this.storeGoodDtos) {
						for (var i in this.checked) {
							if (this.storeGoodDtos[key].goodId.indexOf(this.checked[i].goodId) !== -1) {
								this.checked.splice([i], 1)
							}
						}
					}
				}
				if (this.checked.length <= 0) {
					return false;
				}
				this.storeGoodDtos = this.storeGoodDtos.concat(this.checked)
				for (var i = this.storeGoodDtos.length - 1; i >= 0; i--) {
					this.storeGoodDtos[i].sort_value = i + 1
					this.storeGoodDtos[i].index = i
					this.storeGoodDtos[i].OldProbability = i + 1
				}
				var arr = generateArr(this.storeGoodDtos)
				this.productList = arr
				this.checkedImgList = arr
				// this.pageInfo2.count = this.storeGoodDtos.length
				// this.pageInfo2.rows = arr.splice(0, 5)

			},
			submitProduct() {
				const vm = this
				vm.submitLoading =true
				vm.custormStyle.productStyle = vm.productStyle
				vm.custormStyle.titleText = vm.titleText
				vm.custormStyle.marginStyle = vm.marginStyle
				vm.custormStyle.advertisingImgList = vm.advertisingImgList
        vm.custormStyle.addProduct = vm.addProduct
        vm.custormStyle.addAdvertising = vm.addAdvertising
        vm.custormStyle.addEditor = vm.addEditor
        vm.custormStyle.textContent = vm.textContent
        vm.custormStyle.screenShow = vm.screenShow
				if (vm.onceChecked == true) {
					vm.productList.forEach(item => {
						vm.custormStyle.productList.push(item.goodId)
					})
				} else {
					vm.custormStyle.productList = []
				}
				// JSON.stringify(vm.custormStyle)
				vm.dataApi.ajax('addWebTest', {
					test: vm.custormStyle
				}, res => {
					if (res.responseType === 'S') {
						vm.submitLoading =false
					}
				})
			}

		}
	}
</script>


<style>
	@import '../../../static/css/customerProduct.css';

	.header_title {
		position: relative;
	}

	/* 一行两个 */
	.header_title .page_title {
		margin: 0;
		position: absolute;
		width: 100%;
		text-align: center;
		color: white;
		top: 30px;
	}
	.marginOneStyle{
		margin: 0 10px;
	}
	.marginTwoStyle{
		margin: 0 20px;
	}
  .newEditor{
    margin-left: 0!important;
  }


</style>
